import React, { useEffect, useState } from "react";
import OnlineChat from "../../../components/OnlineChat/OnlineChat";
import "./index.less"
import http from '../../../util/http'

function CustomerTest() {
  const from = {
    UserId: "88888888",
    Nickname: "客服",
    AvatarUrl:
      "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.cx6658.com%2Fuploads%2F20190625%2F20292wdmcpw2omk.jpg&refer=http%3A%2F%2Fwww.cx6658.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1669642373&t=fc6de1ca24d8b8e5bd614c7d521c6618",
  };

  const [activeIndex,setActiveIndex]  = useState(-1);
  const changeActiveIndex = ()=>{
    
  }
  const [connectionList,setConnectionList] = useState([]);

  const getConnectionList = ()=>{
    let params = {
      UserId :from.UserId
    }
    http.post(`/onlineChat/connectionList`,params).then(res=>{
      console.log(res.Result);
      setConnectionList(()=>res.Result)
    })
  }
  
  useEffect(()=>{
    getConnectionList()
  },[])

  return (
    <React.Fragment>
      <div className="customer-wrap">
        <h1 className="customer-title">
          客服中心
        </h1>
        <div className="customer-main-wrap">
          <div className="customer-main">
            <div className="left-box">
              {connectionList && connectionList.map((item,index)=>(
                <div key={index} className="user-item" onClick = {changeActiveIndex}>
                  <div>
                    <img src={item.AvatarUrl} alt="" className="user-img"/>
                  </div>
                  <div>
                    <div>
                      {item.Nickname}
                    </div>
                    <div>
                      新消息新消息新
                    </div>
                  </div>
                </div>
              ))
              }
            </div>

            <div className="right-box">
              <div className="chat-box">
                {connectionList && connectionList.map((item,index)=>(
                  <div key={index} className="chat-item-wrap">
                    <OnlineChat
                      from={from}
                      to={item}
                    ></OnlineChat>
                  </div>
                ))
                }
          </div>
            </div>
          </div>
        </div>
      </div>
      
    </React.Fragment>
  );
}

export default CustomerTest;
